<template>
  <div class="qr-container">
    <!-- 卡片区域 -->
    <el-card>
      <!-- 搜索输入框 -->
      <div>
        <span class="key_word">关键字</span>

        <el-input
          v-model.trim="queryInfo.keyword"
          placeholder="根据编号搜索"
        ></el-input>
        <span class="randoms_btn">
          <el-button @click="clearSearchName" size="small">清除</el-button>
          <el-button
            type="primary"
            size="small"
            @click="getRandomsList(queryInfo)"
            >搜索</el-button
          >
        </span>
      </div>

      <!-- 提示 -->
      <el-alert
        class="randoms_total"
        :title="`数据一共${total}条`"
        type="info"
        :closable="false"
        show-icon
      >
      </el-alert>

      <!-- 表格 -->
      <el-table :data="randomsList" style="width: 100%">
        <el-table-column prop="id" label="编号" width="210"> </el-table-column>
        <el-table-column prop="questionType" label="题型" width="80">
          <template slot-scope="scope">
            <span v-if="scope.row.questionType == 1">单选</span>
            <span v-else-if="scope.row.questionType == 2">多选</span>
            <span v-else>简答</span>
          </template>
        </el-table-column>
        <el-table-column prop="questionIDs" label="题目编号" width="200">
          <template slot-scope="scope">
            <div v-for="item in scope.row.questionIDs" :key="item.number">
              <a
                href="javascript:;"
                class="numberColor"
                @click="showTitlePreview(item)"
                >{{ item.number }}</a
              >
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="addTime" label="录入时间" width="200">
        </el-table-column>
        <el-table-column prop="totalSeconds" label="答题时间（s）">
        </el-table-column>
        <el-table-column prop="accuracyRate" label="正确率（%）">
        </el-table-column>
        <el-table-column prop="userName" label="录入人"> </el-table-column>
        <el-table-column label="操作" width="80">
          <template slot-scope="scope">
            <el-button
              type="danger"
              icon="el-icon-delete"
              circle
              plain
              @click="removeRandomsById(scope.row)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        class="paging"
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryInfo.page"
        :page-sizes="[20, 30, 50, 100]"
        :page-size="queryInfo.pagesize"
        layout=" prev, pager, next, sizes, jumper"
        :total="total"
      >
      </el-pagination>
    </el-card>

    <!-- 页面预览弹出页面 -->
    <el-dialog
      title="题目预览"
      :visible.sync="showTitlePreviewDiglog"
      width="50%"
      @close="close"
    >
      <title-preview
        :detail-list="detailList"
        :showTitlePreviewDiglog="showTitlePreviewDiglog"
        @showTitle="showTitle"
        ref="titlePreview"
      />
    </el-dialog>
  </div>
</template>

<script>
import { randoms, removeRandoms, detail } from "@/api/hmmm/questions";
import TitlePreview from "../components/TitlePreview.vue";
export default {
  data() {
    return {
      randomsForm: {
        keyword: "",
      },
      queryInfo: {
        pagesize: 20,
        page: 1,
        keyword: "",
      },
      randomsList: [],
      total: 0,
      showTitlePreviewDiglog: false,
      detailList: {
        questionType: 1,
        id: 21,
        tags: "css",
        subjectName: "前端",
        directoryName: "目录",
        direction: "方向",
        question: "题干",
        videoURL:
          "https://haokan.baidu.com/v?pd=wisenatural&vid=11472639066004873888",
        remarks: "备注",
        answer: "答案解析答案解析答案解析答案解析",
        options: [
          {
            code: "A",
            title: "选项A",
            img: "http",
            id: 11,
            isRight: 0,
          },
          {
            code: "B",
            title: "选项B",
            img: "http",
            id: 11,
            isRight: 1,
          },
          {
            code: "C",
            title: "选项C",
            img: "http",
            id: 11,
            isRight: 0,
          },
          {
            code: "D",
            title: "选项D",
            img: "http",
            id: 11,
            isRight: 0,
          },
        ],
      },
    };
  },
  components: {
    TitlePreview,
  },
  created() {
    this.getRandomsList(this.queryInfo);
  },
  methods: {
    close() {
      this.$refs.titlePreview.closeTitlePreview();
    },
    async showTitlePreview(item) {
      //  console.log(22222,item);
      this.showTitlePreviewDiglog = true;
      const res = await detail(item);
      console.log(11111, res);
      //  if(res.status !== 200) return
      this.detailList = res.data;
    },
    showTitle(row) {
      // console.log(row);
      this.showTitlePreviewDiglog = row;
    },
    clearSearchName() {
      this.queryInfo.keyword = "";
    },
    async getRandomsList(queryInfo) {
      const data = await randoms(queryInfo);
      // console.log(data);
      if (data.status === 200) {
        const res = data.data;
        this.total = res.counts;
        this.randomsList = res.items;
        // console.log(this.randomsList);
      } else {
        this.$message("获取列表失败，请刷新");
      }
    },
    async removeRandomsById(row) {
      const confirmResult = await this.$confirm(
        "此操作将永久删除该题组, 是否继续?",
        "提示",
        {
          type: "warning",
          distinguishCancelAndClose: true,
          confirmButtonText: "确定",
          cancelButtonText: "取消",
        }
      ).catch((err) => err);
      if (confirmResult == "confirm") {
        const data = await removeRandoms(row);
        if (data.status !== 200) {
          this.$message({
            type: "error",
            message: "删除失败",
          });
        } else {
          this.getRandomsList();
          this.$message({
            type: "success",
            message: "删除成功",
          });
        }
      }
    },

    handleSizeChange(newSize) {
      this.queryInfo.page = 1;
      this.queryInfo.pagesize = newSize;
      // console.log(this.pagesize);
      this.getRandomsList(this.queryInfo);
    },
    handleCurrentChange(newPage) {
      this.queryInfo.page = newPage;
      // console.log(`当前页: ${val}`);
      this.getRandomsList(this.queryInfo);
    },
  },
};
</script>

<style scoped>
.qr-container {
  padding: 10px;
  box-sizing: border-box;
}
.el-input {
  width: 20%;
}
.el-input__inner {
  height: 28px;
}
.randoms_btn {
  float: right;
}
.key_word {
  width: 80px;
  font-size: 14px;
  margin: 0 10px;
}
.randoms_total {
  margin: 15px 0;
}
.paging {
  float: right;
  padding: 20px 0;
}
.paging .el-pagination__jump {
  margin-left: 0px !important ;
}
.numberColor {
  color: rgb(0, 153, 255);
}
.el-radio {
  display: flex;
  align-items: flex-start;
}
</style>
